<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈亮 2021-07-13 12:28-1:08</title>
</head>

<body>
    <select name="" id="provinces">
        <option value="">请选择省份</option>
    </select>
    <select name="" id="citys">
        <option value="">请选择城市</option>
    </select>
    <select name="" id="dstricts">
        <option value="">请选择区县</option>
    </select>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        let provinces = []
        $.get(`./city.json`, function (res) {
            provinces = res.filter(r => r.pid === 0)
            provinces.forEach(p => {
                p.citys = res.filter(r => r.pid === p.id)
                p.citys.forEach(c => {
                    c.dstricts = res.filter(r => r.pid === c.id)
                })
            });
            provinces.forEach(p => {
                let option = $(`<option>`)
                option.val(p.id)
                option.html(p.name)
                $(`#provinces`).append(option)
            })
        })

        $(`#provinces`).change(function(){
            $(`#citys option:not(:first)`).remove()
          let pid=parseInt($(this).val())
          let citys=provinces.find(p=>p.id===pid).citys
          citys.forEach(c=>{
            let option = $(`<option>`)
                option.val(c.id)
                option.html(c.name)
                $(`#citys`).append(option)
          })
        })
        $(`#citys`).change(function(){
            $(`#dstricts option:gt(1)`).remove()
          let cid=parseInt($(this).val())
          let dstricts=provinces.find(p=>p.citys.find(c=>c.id===cid)).citys.find(r=>r.id===cid).dstricts
          dstricts.forEach(c=>{
            let option = $(`<option>`)
                option.val(c.id)
                option.html(c.name)
                $(`#dstricts`).append(option)
        })
    })
    </script>
</body>

</html>